<template>
  <div>
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>
    <h2>{{statusVal}}</h2>
    <h2>{{statusTitleAlias}}</h2>
    <button type="button" @click="clickBtnName">测试vuex命名空间</button>
    <h2>{{loginVal}}</h2>
    <button type="button" @click="clickBtn">测试vuex</button>
    <van-grid :column-num="3">
      <van-grid-item v-for="value in 30" :key="value" icon="photo-o" text="文字" />
    </van-grid>
  </div>
</template>
<script>
import { mapGetters, mapState } from "vuex";
export default {
  data() {
    return {
      value: ""
    };
  },
  computed: {
    ...mapState({
      statusVal: state => state.user.status,
      loginVal: state => state.isLogin
    }),
    ...mapGetters("user", {
      statusTitleAlias: "statusTitle"
    })
  },
  methods: {
    onSearch() {},
    onCancel() {},
    clickBtnName() {
      this.$store.dispatch("user/toggleStatus", 2);
    },
    clickBtn() {
      this.$store.dispatch("userLogin");
    }
  }
};
</script>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>